<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统 - 管理中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta ng-include="'head.html'"> -->
    <style type="text/css">

    </style>

    <script src="../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/build.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>
    
</head>

<body class="flat-blue">
<div class="app-container" ng-app="myApp" ng-controller="myCtrl">
<div class="row content-container">
<div ng-include="'menus.html'" onload="loadReady()"></div>
<div class="container-fluid">
<div class="side-body padding-top" id="main">
    <!------------------Main---------------->
    <div style="width:90%; margin:10px 10px 10px 0px; padding-bottom:30px">
        <table class="table" data-show-toggle="false" data-expand-first="true">
            <thead>
            <tr>
                <th ng-show="false">ID</th>
                <th>序号</th>
                <th>字段</th>
                <th data-breakpoints="xs">控件</th>
                <th ng-show="false">fieldName</th>
                <th>名称</th>
                <th>输入提示</th>
                <th>是否必填</th>
                <th data-breakpoints="xs sm">预览</th>
                <th>操作</th>
                <th>排序</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in rows" on-finish-render-filters class="{{row.enable ? 'rowEnable' : 'rowDisabled'}}" ng-if="row.name!=''">
                <td>{{row.index}}</td>
                <td>{{row.fieldName}}</td>
                <!-- 类型 -->
                <td>{{typeText[row.type]}}</td>
                <!-- 名称可编辑 -->
                <td>
                    <span ng-show="row.editFlag[0]">
                        <span class="info mr">{{row.name}}</span>
                        <span class="glyphicon glyphicon-edit" ng-click="editSwitch($index, 0)"></span>
                    </span>
                    <span ng-show="!row.editFlag[0]">
                        <input type="text" ng-model="row.name" >
                        <button ng-click="editSwitch($index, 0)" class="bt btn btn-default btn-xs">
                            <span class="glyphicon glyphicon-ok"></span> 完成
                        </button>
                    </span>
                </td>
                <!-- 功能描述可编辑 -->
                <td>
                    <span ng-show="row.editFlag[1]">
                        {{row.describe}}
                        <span class="ml glyphicon glyphicon-edit" ng-click="editSwitch($index, 1)"></span>
                    </span>
                    <span ng-show="!row.editFlag[1]">
                        <input type="text" ng-model="row.describe" >
                        <button ng-click="editSwitch($index, 1)" class="bt btn btn-default btn-xs">
                            <span class="glyphicon glyphicon-ok"></span> 完成
                        </button>
                    </span>
                </td>
                <!-- 是否必填 -->
                <td>
                    <input type="radio" value="true" ng-model="row.notNull" name="{{row.field}}">是
                    <input type="radio" value="false" ng-model="row.notNull" name="{{row.field}}">否
                </td>
                <!-- 预览 · 编辑 -->
                <td ng-switch="row.type">
                    <div ng-switch-when="text">
                        <input style="width:190px" type="text" placeholder="{{row.describe}}" >
                    </div>
                    <!-- 单选按钮 -->
                    <div ng-switch-when="radio">
                        <span ng-repeat="sel in selOptions[row.field]" ng-if="sel.name!=''">
                            <input type="radio" value="false" name="{{row.field}}_r" >{{sel.name}}
                        </span>
                        <button class="bt btn btn-info btn-xs" data-toggle="modal" data-target="#myModal1" ng-click="beforeModal(row.field)">
                            <span class="glyphicon glyphicon-pencil"></span> 编辑
                        </button>
                    </div>
                    <!-- 下拉列表 -->
                    <div ng-switch-when="select">
                        <select ng-model='x' ng-options="x.name for x in selOptions[row.field]"></select>
                        <button class="bt btn btn-info btn-xs" data-toggle="modal" data-target="#myModal1" ng-click="beforeModal(row.field)">
                            <span class="glyphicon glyphicon-pencil"></span> 编辑
                        </button>
                    </div>
                    <!-- 时间选择框 -->
                    <div ng-switch-when="time">
                        <div class="input-group date" data-date-format="yyyy-mm-dd" style="margin-top:4px">
                            <input class="form-control" size="14" type="text" value="2017-01-01" style="height: 30px; width:100px">
                        <span class="input-group-addon bg-light btn-sm f" >
                            <span class="glyphicon glyphicon glyphicon-time" style="font-size: 10px"></span>
                        </span>
                        </div>
                    </div>
                    <!--地址选择组件-->
                    <div ng-switch-when="address" style="margin-top: 3px">
                        <select ng-model="Addrs[row.field].selProvince" style="width:80px; float:left" ng-change="selectChina(0, row.field);"
                                ng-options="x for x in Addrs[row.field].libs.provinces"></select>
                        <select ng-model="Addrs[row.field].selCity" style="width:80px; float:left" ng-change="selectChina(1, row.field);"
                                ng-options="x for x in Addrs[row.field].libs.citys"></select>
                        <select ng-model="Addrs[row.field].selCounty" style="width:80px; float:left"
                                ng-options="x for x in Addrs[row.field].libs.countys"></select>
                    </div>
                </td>
                <!--是否启用该字段-->
                <td>
                    <span ng-show="row.enable" class="pointer primary" title="点击切换状态">
                        <span class="glyphicon glyphicon-ok-circle" ng-click="changeEnable($index)"></span>
                    </span>
                    <span ng-show="!row.enable" class="pointer danger" title="点击切换状态">
                        <span class="glyphicon glyphicon-ban-circle" ng-click="changeEnable($index)"></span>
                    </span>
                    <span class="pointer danger ml" title="删除该字段">
                        <span class="glyphicon glyphicon-remove-circle" ng-click="removeField($index)"></span>
                    </span>
                </td>
                <!--排序-->
                <td>
                    <span class="glyphicon glyphicon-arrow-up pointer sort" ng-click="changeIndex($index, 1)"></span>
                </td>
            </tr>
            </tbody>
        </table>

        <!-- End Table -->
        <div class="col-sm-12" align="left" style="margin-top:10px;float:none">
            <button type="button" class="btn btn-default btn-sm" ng-click="addRow()">
                <span class="glyphicon glyphicon-plus"></span> 增加新行
            </button>
        </div>
        <div class="col-sm-12" align="right" style="margin-top:10px;float:none">
            <button type="button" class="btn btn-default" ng-click="cancel()">取消</button>
            <button type="button" class="btn btn-primary" ng-click="Submit()">提交</button>
        </div>

        <div ng-include="'modalEditList.html'"></div>
        <div ng-include="'modalNewField.html'"></div>
        
    </div>

    <!------------------End Main---------------------->
</div>  <!--End side-body-->
</div>  <!--End container-fluid-->
</div>  <!--End content-container-->
<div ng-include="'footer.html'"></div>
</div>  <!--End app-container-->


        <script language="javascript">
            function cout(obj){ console.log(obj); }

            var app = angular.module('myApp', []);

            app.controller('myCtrl', function($scope) {
                loadCtlBase($scope);
                
                
            });

            $(document).ready(function(){
                $('.date').datetimepicker({
                    format: 'yyyy-mm-dd', language:'zh-CN', autoclose:true, minView:"month"
                });
            });



        </script>


</body>

</html>
